<template>
    <div id="building">
        <div class="box" style="text-align: center">
            <div >
                <div style="margin-top: 20px;font-size: 24px">登录</div>
                <el-radio-group style="margin-top: 20px" v-model="radio" @change = "methodChange">
                    <el-radio-button label=0>账号密码登录</el-radio-button>
                    <el-radio-button label=1>手机号登陆</el-radio-button>
                </el-radio-group>
            </div>
            <el-divider ></el-divider>
            <div id="loginMethod">
                <router-view/>
            </div>
        </div>
    </div>

</template>

<script lang="ts" setup>
import {ref} from "vue";
import router from "@/router";

let path = window.location.pathname
let radio =ref();
if(path ==='/login/phone'){
    radio = ref(1)
}else{
    radio = ref(0)
}



const methodChange = (): void => {
    console.log(radio.value)
    if(radio.value == 0){
        radio = ref(0)
        router.push('/login');
        return;
    }
    if(radio.value == 1){
        radio = ref(1)
        router.push('/login/phone')
    }

};

</script>

<style scoped>
#building{
    background:url("../../assets/image/background.jpg");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
}
.box{
    /*backdrop-filter: blur(5px);*/
    background-color: rgba(255, 255, 255, 0.5);
    width: 400px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: solid 1px gray;
    border-radius: 10px;
    box-shadow: var(--el-box-shadow);
}
</style>